<template>
  <div>
    <el-form-item label="按钮布局">
      <el-select v-model="localData.className" clearable>
        <el-option label="居左" value="anvil-code-left" />
        <el-option label="居中" value="anvil-code-middle" />
        <el-option label="居右" value="anvil-code-right" />
      </el-select>
    </el-form-item>
    <div class="group-header">
      <div class="label">按钮组配置:</div>
      <text-add-button text="添加按钮" @click="addBtn" />
      <div class="tips">tips:拖动按钮来改变顺序</div>
    </div>
    <div class="group-config">
      <draggable :list="localData.btnGroup" item-key="prop" :group="{ name: 'btns', pull: false, put: false }" ghost-class="ghost" :animation="300" class="group-btns">
        <template #item="{ element, index }">
          <div class="group-btn">
            <el-popover trigger="hover">
              <div class="group-pop">
                <custom-btn-setting
                  text="编辑"
                  :value="element"
                  :options="formJson"
                  :formModelDataFromDesign="formModelDataFromDesign"
                  @submit="
                    (data) => {
                      updateBtn(data, index);
                    }
                  "
                />
                <text-delete-button @click="deleteBtn(index)" />
              </div>

              <template #reference>
                <span>
                  <custom-button v-bind="element" :clickBanned="true" />
                </span>
              </template>
            </el-popover>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script>
import customBtnSetting from '../customButton/customBtnSetting.vue';
import Draggable from 'vuedraggable';
import { randomString } from '@/utils/zmids';
import btnConfig from '../customButton/customButtonAttr';
import { generateValidUuid } from '@code/components/anvil-code-low-common/utils/common-methods';
import { cloneDeep } from 'lodash-es';

export default {
  name: 'CustomButtonGroupConfig',
  components: { customBtnSetting, Draggable },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formJson: {
      type: Object,
      default: () => {}
    },
    formModelDataFromDesign: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {}
    };
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal;
          this.checkBtn();
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  methods: {
    addBtn() {
      const uuid = generateValidUuid();
      const BtnConfig = {
        ...cloneDeep(btnConfig),
        uuid,
        prop: uuid,
        buttonName: '自定义',
        parentName: this.localData.parentName ? this.localData.parentName : undefined
      };
      this.localData.btnGroup.push(BtnConfig);
    },
    // 每一次字段变化时都要同步parentName字段
    checkBtn() {
      if (this.localData.parentName) {
        this.localData.btnGroup.map((btn) => {
          btn.parentName = this.localData.parentName;
        });
      } else {
        this.localData.btnGroup.map((btn) => {
          btn.parentName = undefined;
        });
      }
    },
    updateBtn(data, index) {
      this.localData.btnGroup[index] = data;
    },
    deleteBtn(index) {
      this.localData.btnGroup.splice(index, 1);
    }
  }
};
</script>

<style scoped lang="scss">
.group-header {
  height: 32px;
  line-height: 32px;
  display: flex;
  align-items: center;
  gap: 20px;

  .label {
    font-size: 14px;
  }

  .tips {
    font-size: 12px;
    color: gray;
  }
}

.group-config {
  margin-top: 20px;

  .group-btns {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;

    .group-btn {
      min-width: 25%;
      text-align: center;
    }
  }
}

.group-pop {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
</style>
